<template>
        <div class="loading-wrap" v-if="showLoading">
            <section class="loading-box">
                <span class="loading-icon"></span>
            </section>
        </div>
</template>
    
<script setup lang='ts'>
import { ref } from "@vue/reactivity";

    let showLoading = ref(false);
    let show = (): void => {
        showLoading.value = true;
    };
    let hide = (): void => {
        showLoading.value = false;
    };

    defineExpose({
        show,
        hide
    })
    
</script>
    
<style lang="less">
.loading-wrap {
    position: fixed;
    background-color: rgba(0, 0, 0, .5);
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    .loading-box {
        width: 80px;
        height: 80px;
        background-color: #fff;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        align-items: center;
        .loading-icon {
            width: 50%;
            height: 50%;
            display: block;
            margin: auto;
            background-image: url('../../assets/loading.png');
            background-size: 100% 100%;
            animation: roate .7s linear infinite;
        }
    }
}
@keyframes roate {
    to {
        transform: rotate(360deg);
    }
}
    
</style>